<template>
  <div class="app-container">
    <el-card>
      <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="省份">
          <el-select v-model="searchForm.province" clearable placeholder="请选择">
            <el-option v-for="item in provinceList" :key="item.pinyin" :label="item.name" :value="item.pinyin" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.queryStatus" clearable placeholder="请选择">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间：" prop="beginTime">
          <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
            placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker style="width: 200px" v-model="searchForm.endTime" align="right" type="date"
            placeholder="选择结束日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button icon="el-icon-refresh" type="primary" @click="searchList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="listLoading" :data="tableData.list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="Id" prop="id" />
        <el-table-column align="center" label="企业名称" prop="enterpriseName" />
        <el-table-column align="center" label="企业税号" prop="creditCode" />
        <el-table-column align="center" label="省份" prop="provinceName" />
        <el-table-column align="center" label="手机号" prop="phone" />
        <el-table-column align="center" label="创建时间" prop="createTime" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" type="primary" v-if="scope.row.queryStatus == 100">查询中</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.queryStatus == 200">查询成功</el-tag>
            <el-tag size="mini" type="danger" v-else-if="scope.row.queryStatus == 300">查询失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="detail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageRight" background layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]" :page-size="searchForm.pageSize" :total="tableData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
    <taxLogDetail ref="taxLogDetail" />
  </div>
</template>
<script>
import taxLogDetail from "./components/taxLogDetail.vue";
import { getTaskQueryPage, getTaskQueryList, getProvinceList } from "@/api/tax";
import { authDate } from "@/utils/date";
export default {
  name: "log",
  components: {
    taxLogDetail
  },
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        province: "",
        beginTime: "",
        endTime: "",
        queryStatus: ""
      },
      tableData: {
        list: [],
        total: 0
      },
      provinceList: [],
      listLoading: false,
      searchTime: [],
      statusList: [
        { label: "查询中", value: 100 },
        { label: "查询成功", value: 200 },
        { label: "查询失败", value: 300 }
      ]
    };
  },
  created() {
    this.getProvinceList();
    this.getList();
  },
  mounted() { },
  methods: {
    detail(v) {
      this.$refs.taxLogDetail.opendialog(v);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        province: "",
        beginTime: "",
        endTime: "",
        queryStatus: ""
      };
      this.getList();
    },
    getProvinceList() {
      getProvinceList().then(res => {
        this.provinceList = res.data;
      });
    },
    searchList() {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;

      authDate(this.searchForm.beginTime, this.searchForm.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          this.getList();
        }
      });
    },
    getList() {
      this.listLoading = true;

      getTaskQueryPage(this.searchForm)
        .then(res => {
          this.tableData.list = res.data.list;
          this.tableData.total = res.data.total;

          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss"></style>
